<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_解决浮动产生的影响</title>
    <style>
        .parent{
            border: 1px solid green;
            /*height: 200px;*/
            /*float: left;*/
            /*overflow: hidden;*/
        }
        .box{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: yellow;
            float: left;
        }
        .box2{
            background-color: blue;
            float: left;
        }
        .box3{
            background-color: red;
            float: left;
        }
        /*.box4{*/
        /*    clear: both;*/
        /*}*/
        .parent::after{
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<!--
    解决浮动产生影响的方法：
        1.给父元素指定高度，但是这样只能解决父元素高度问题
        2.给父元素也设置浮动，但是这样会带来其他影响
        3.给父元素设置overflow:hidden;
        4.在所有浮动元素最后面，加上一个块元素，并且给该块元素设置 clear:both;
        5.给浮动元素的父级元素,设置伪元素，通过伪元素清除浮动,原理与方案4一致。  推荐使用


 注意：布局中的一个原则：设置浮动的时候，兄弟元素要么就全部浮动,要么全都不浮动。


-->
    <div class="parent">
        <div class="box box1">div1</div>
        <div class="box box2">div2</div>
        <div class="box box3">div3</div>
<!--        <div class="box box4">div4</div>-->
    </div>



</body>
</html>
